<template>
    <div class="header-wrap">
        <router-link tag="div" to="/#" class="header-abs"
            v-show="showAbs"
        >
            <div class="iconfont header-abs-back">&#xe624;</div>
        </router-link>
        <div class="header-fix"
             v-show="!showAbs"
             :style="opacityStyle"
        >
            <router-link to="/#">
                <div class="iconfont header-fix-back">&#xe624;</div>
            </router-link>
            经典详情
        </div>
    </div>
</template>

<script>
    export default {
        name: "DetialHeader",
        data () {
            return {
                showAbs:true,
                opacityStyle:{
                    opacity:0
                }
            }
        },
        activated () {
            window.addEventListener('scroll',this.handleScroll)
        },
        deactivated () {
            window.removeEventListener('scroll',this.handleScroll)
        },
        methods: {
            handleScroll () {
                const top =document.documentElement.scrollTop
                // console.log(document.documentElement.scrollTop);
                if(top>60 ){
                    let opacity=top/140
                    opacity=opacity>1?1:opacity
                    this.opacityStyle={
                        opacity
                    }
                    this.showAbs=false
                }else{
                    this.showAbs=true
                }
            },
            fn2 () {
                alert(1)
            }
        }
    }
</script>

<style lang="stylus" scoped>
    @import "~styles/variables.styl"
.header-abs
    position: absolute
    left:.2rem
    top:.2rem
    width:.8rem
    height:.8rem
    -webkit-border-radius: 50%
    -moz-border-radius: 50%
    border-radius: 50%
    background: rgba(0,0,0,0.8)
    text-align center
    line-height:.8rem
.header-abs-back
    color: #ffffff
    font-size .4rem

.header-fix
    position: fixed
    top: 0
    left: 0
    right: 0
    overflow hidden
    height:$headerHeight
    line-height:$headerHeight
    text-align center
    color: #fff
    background:$bgcolor
    font-size:.32rem
    z-index: 2
.header-fix-back
    width:.64rem
    text-align center
    font-size:.4rem
    position: absolute
    top:0
    left:0
    color: #fff
</style>